<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="index.css">
    <script type="text/javascript" src="flexible.min.js">
    </script>
    <title>主页</title>
</head>
<style>
    /* 初始化 */
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

    ul {
        list-style: none;
    }

    .clearfix:after,
    .clearfix:before {
        content: "";
        display: block;
        clear: both
    }

    /* body背景，规定字体 */
    body {
        background: url('./img/beijing.png') ;
        background-size: cover;
        color: #fff;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }

    /* 头部区域 */
    .indexTop {
        width: 100%;
        height: 50px;
    }

    .indexTop>img {
        width: 100%;
    }

    /* 主体 */
    .container {
        width: 65%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;
        padding: 5px
    }

    .container li {
        width: 25%;
        text-align: center;
        float: left;
        padding: 10px;
        position: relative;
        overflow: hidden
    }
    .imgbox{
    margin:auto;
        width:60%;
        height:60%
    }
    .imgbox img{
        width:50%;
        height:50%;
    }
    .container li .imgbox,.container li .text{
        margin-top: 20px;
    }

</style>

<body>
<!-- 头部 -->
<div class="indexTop">
    <img src="./img/top01.png" alt="">
</div>
<!-- 主体 -->
<div class="container">
    <ul class="clearfix">
        <li>
            <div class="imgbox" id='0'><img src="./img/tubiao0007.png" alt=""></div>
            <div class="text">工厂灯光</div>
        </li>
        <li>
            <div class="imgbox" id='1'><img src="./img/tubiao0001.png" alt=""></div>
            <div class="text"><a href="#">工厂空调</a></div>
        </li>
        <li>
            <div class="imgbox" id='2'><img src="./img/tubiao0005.png" alt=""></div>
            <div class="text">人才市场</div>
        </li>
        <li>
            <div class="imgbox" id='3'><img src="./img/tubiao0006.png" alt=""></div>
            <div class="text">自动补人</div>
        </li>
    </ul>

    <ul class="clearfix">
        <li>
            <div class="imgbox" id='4'><img src="./img/tubiao0002.png" alt=""></div>
            <div class="text">供货列表</div>
        </li>
        <li>
            <div class="imgbox" id='5'><img src="./img/tubiao0003.png" alt=""></div>
            <div class="text"><a href="#">购买原材料</a></div>
        </li>
        <li>
            <div class="imgbox" id='6'><img src="./img/tubiao0009.png" alt=""></div>
            <div class="text"><a href="#">问题车辆仓库</a></div>
        </li>
        <li>
            <div class="imgbox" id='7'><img src="./img/tubiao0008.png" alt=""></div>
            <div class="text"><a href="#">成品车辆仓库</a></div>
        </li>
    </ul>

    <ul class="clearfix">
        <li>
            <div class="imgbox" id='8'><img src="./img/tubiao0010.png" alt=""></div>
            <div class="text">销售报表</div>
        </li>
        <li>
            <div class="imgbox" id='9'><img src="./img/tubiao0002.png" alt=""></div>
            <div class="text"><a href="#">汽车资讯</a></div>
        </li>
        <li>
            <div class="imgbox" id='10'><img src="./img/tubiao0007.png" alt=""></div>
            <div class="text"><a href="#">车辆定制</a></div>
        </li>
        <li>
            <div class="imgbox" id='11'><img src="./img/tubiao0001.png" alt=""></div>
            <div class="text"><a href="#">创建学生生产线</a></div>
        </li>
    </ul>

    <ul class="clearfix">
        <li>
            <div class="imgbox" id='12'><img src="./img/tubiao0010.png" alt=""></div>
            <div class="text">温度显示</div>
        </li>
        <li>
            <div class="imgbox" id='13'><img src="./img/tubiao0003.png" alt=""></div>
            <div class="text"><a href="#">购买原材料</a></div>
        </li>
        <li>
            <div class="imgbox" id='14'><img src="./img/tubiao0006.png" alt=""></div>
            <div class="text"><a href="#">人员解雇</a></div>
        </li>
        <li>
            <div class="imgbox" id='15'><img src="./img/tubiao0004.png" alt=""></div>
            <div class="text"><a href="#">生产环节</a></div>
        </li>
    </ul>

</div>

<script>

for(let i=0;i<16;i++){
    document.getElementById(i).onclick = function () {
        if(window.nativeMethod){
            nativeMethod.startActivity(i);
        }
    };
}


</script>

</body>

</html>